<template>
  <div class="hot">
    <div class="title">时下最热门的礼包</div>
    <ul class="hot-list">
      <router-link to="" class="hot-li" tag="li" v-for="item of hotList" :key="item.id">
        <img class="hot-img" :src="item.imgUrl" alt="">
        <p class="hot-title">{{item.title}}</p>
        <button class="hot-button">点击领取</button>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'GiftHot',
  data () {
    return {
      hotList: [
        {
          id: '001',
          imgUrl: 'http://game.zhishengwh.com/uploads/20180813135833/9cc047abfbd9fca20274d349ad4b60fa.png',
          title: '最新礼包'
        }, {
          id: '002',
          imgUrl: 'http://game.zhishengwh.com/uploads/20180813114709/5dacee15f18d749215ad4ae952924fa0.png',
          title: '火影礼包-火影忍者'
        }, {
          id: '003',
          imgUrl: 'http://game.zhishengwh.com/uploads/20180813140439/0fd2e49b2fde7c9310f101de285c2682.png',
          title: '新手礼包'
        }, {
          id: '004',
          imgUrl: 'http://game.zhishengwh.com/uploads/20180813115752/66a5ce3a966a8a9dd2306ddc867c8e45.png',
          title: '全民礼包'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .title
    overflow: hidden
    line-height: .8rem
    background: #f5f5f5
    padding: 0 .2rem
  .hot-list
    display: flex
    .hot-li
      flex: 1
      padding: .2rem 0
      text-align: center
      .hot-img
        width: 1.4rem
        height: 1.4rem
        border-radius: .4rem
      .hot-title
        width: 1.6rem
        padding: .1rem 0
        display: inline-block
        ellipse()
      .hot-button
        margin-top .1rem
        line-height: .44rem
        background: #ff9300
        padding: 0 .2rem
        border-radius: .06rem
        color: #fff
</style>
